<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery.js"></script>

    <style type="text/css">
        *{ margin: 0px; padding: 0px;}
        li{ list-style: none;}
        .content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
        .content ul{ width: 1020px; height:100px;}
        .content ul li{ float: left; }
    </style>
    <script>
        function scroll(){
            $(".content ul").animate({"margin-left":"-110px"},function(){
                $(".content ul li:eq(0)").appendTo($(".content ul"))
                $(".content ul").css({"margin-left":0})
            })
        }
        setInterval(scroll,500);
    </script>
</head>
<body>
<div class="content">
    <ul>
        <li>111111111111111111111111111</li>
    </ul>
</div>
</body>
</html>